<template>
  <view class="page">
    <Navbar title="我的消息" occupy>
      <u-icon slot="left" name="arrow-left" color="#fff" />
    </Navbar>
    <view
      class="f f-ac f-jb row"
      v-for="(i, k) in dataList"
      :key="k"
      @click="handleMsg(i)"
    >
      <view class="f f-ac f-js">
        <u-avatar
          :icon="i.icon"
          bg-color="#24de7366"
          size="84rpx"
          color="#fff"
          font-size="22"
        />
        <view style="margin-left: 20rpx">
          <u-text
            :text="i.label"
            color="#24DE73"
            bold
            size="28rpx"
            lines="1"
            line-height="26"
          />
          <u-text
            :text="i.subTitle"
            color="#B6B6B6"
            size="24rpx"
            lines="1"
            line-height="26"
          />
        </view>
      </view>
      <view class="f f-ac">
        <view v-if="i.count > 0" class="badge">{{ i.count }}</view>
        <u-icon name="arrow-right" color="#b6b6b6" size="16" />
      </view>
    </view>
  </view>
</template>

<script>
import { getUnreadCount } from "@/request/myApi.js";
export default {
  data() {
    return {
      dataList: [
        {
          icon: "bell-fill",
          label: "提醒消息",
          subTitle: "回复消息",
          type: "1",
          count: 0,
        },
        {
          icon: "volume-fill",
          label: "系统公告",
          subTitle: "如何建立良好的客户关系",
          type: "2",
          count: 0,
        },
        {
          icon: "rmb-circle-fill",
          label: "消费记录",
          subTitle: "查看消费记录",
          type: "3",
          count: 0,
        },
      ],
    };
  },
  onShow() {
    this.getData();
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.getData();
  },
  methods: {
    // 获取未读消息数量
    getData() {
      getUnreadCount()
        .then((res) => {
          if (res.code == 200) {
            this.dataList.forEach((i, k) => {
              i.count = res.data[k].count;
              i.subTitle = res.data[k].title;
              i.type = res.data[k].type;
            });
          } else {
            uni.showToast({
              title: res.msg || "服务器错误",
              icon: "none",
              mask: true,
            });
          }
        })
        .finally(() => {
          uni.stopPullDownRefresh();
        });
    },
    // 跳转消息列表
    handleMsg(i) {
      uni.navigateTo({ url: `/pages/my/myMessageList?messageType=${i.type}` });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  height: 100vh;
  overflow: hidden;
  background: radial-gradient(48.31% 108.99% at 100% 1.17%, #142527 0%, #15161c 100%);
  position: relative;
  padding: 20rpx;
  .row {
    color: #fff;
    font-size: 28rpx;
    padding: 30rpx 0;
    border-bottom: 1rpx solid rgba(217, 217, 217, 0.3);
    &:active {
      background: linear-gradient(to right, #15161c 0%, #142527 90%);
    }
    .avatar {
      border: 4rpx solid #24de73;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 20rpx;
    }
    .badge {
      display: inline-block;
      padding: 2rpx 24rpx;
      border-radius: 50rpx;
      font-size: 26rpx;
      color: #fff;
      background-color: #24de7366;
      margin-right: 20rpx;
    }
  }
}
</style>
